import React, { useEffect, useState } from 'react';
import { Menu, Skeleton,Layout, theme, Flex } from 'antd';
import { useLocation, useNavigate } from 'react-router-dom';
import { GetMyMenus } from '../api/right';
import router from '../router';
import  "../css/layout.css"

import { createFromIconfontCN } from '@ant-design/icons';
import { calc } from 'antd/es/theme/internal';
import { getWidth } from '../utils/getWidth';


const IconFont = createFromIconfontCN({
    scriptUrl: [
        // '//at.alicdn.com/t/c/font_4384990_1tcegmsbsmb.js'
       '//at.alicdn.com/t/c/font_4415106_ba2kenisebi.js'
        
        
        ,
        // icon-javascript, icon-java, icon-shoppingcart (overridden)
        //   '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js', 
    ],
});


// function getItem(label, key, icon, children, type) {
//     return {
//         key,
//         icon,
//         children,
//         label,
//         type,
//     };
// }

// const MyMenu = () => {
//     const [items,setItems]=useState([]);
//     const [isLoading,setLoading]=useState(true);
//     //添加子菜单
//     const addMenus=(d)=>{
//         let menus=[];
//          d.forEach((d)=>{
//           menus.push(getItem(d.name, d.url));
//          })

//          return menus
//     }
//     useEffect(()=>{
//         const getMenus=async ()=>{
//             const res= await GetMyMenus();
//             if(res.result===0){
//                 let menu=[];
//                 res.data.forEach((d,i)=>{
//                     let sonMenu=[];
//                     if(d.children!=0){
//                      sonMenu=addMenus(d.children);
//                      menu.push (getItem(d.name, d.url, <div className={"iconfont " + d.icon}></div>,sonMenu))
//                     }else{
//                         menu.push (getItem(d.name, d.url, <div className={"iconfont " + d.icon}></div>))
//                     }
//                     rootSubmenuKeys.push(d.url)

//                 })


//                 setLoading(false);
//                 setItems(menu);

//             }

//         }
//         getMenus();
//     },[]);


//     const [openKeys, setOpenKeys] = useState(['sub1']);
//      const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
//     const navigate = useNavigate();
//     //点击哪个跳转哪个页面
//     const go = (e) => {
//         navigate(e.key)
//         console.log(router);
//     }
//     const onOpenChange = (keys) => {
//         const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
//         if (latestOpenKey && rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
//             setOpenKeys(keys);
//         } else {
//             setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
//         }
//     };

//     return (
//         <Skeleton active loading={isLoading}  paragraph={{ rows: 10 }}>
//         <Menu
//             mode="inline"
//             openKeys={openKeys}
//             onOpenChange={onOpenChange}
//             style={{
//                 width: 200,
//             }}
//             items={items}
//             onClick={(e) => { go(e) }}
//         /></Skeleton>
//     );
// };




function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}
const items = [
    getItem('首页', '/', <IconFont type="icon-shouye" style={{ fontSize: 20}}></IconFont>),
    getItem('订单管理', '/order', <IconFont type="icon-shouye1" style={{ fontSize: 20 ,color:"#000"}}></IconFont>, [
        getItem('主页', '/order', <IconFont type="icon-yingyong" style={{ fontSize: 20 }}></IconFont>,)
    ]),
    // {
    //     type: 'divider',
    // },
    getItem('商品管理', '/goods', <IconFont type="icon-gouwu" style={{ fontSize: 20 }}></IconFont>, [
        getItem('商品主页', '/goods', <IconFont type="icon-yingyong" style={{ fontSize: 20 }}></IconFont>,),
        getItem('商品类型', '/goods/type', <IconFont type="icon-hrshopType" style={{ fontSize: 20 }}></IconFont>),
        getItem('新增商品', '/goods/add',<IconFont type="icon-xinzeng" style={{ fontSize: 20 }}></IconFont>),
    ]),
    getItem('供应商管理', '/supplier', <IconFont type="icon-gongyingshang" style={{ fontSize: 20 }}></IconFont>, [
        getItem('供应商主页', '/supplier', <IconFont type="icon-yingyong" style={{ fontSize: 20 }}></IconFont>,),
        getItem('经营种类', '/supplier/type',<IconFont type="icon-hrshopType" style={{ fontSize: 20 }}></IconFont>),
        getItem('新增供应商', '/supplier/add',<IconFont type="icon-xinzeng" style={{ fontSize: 20 }}></IconFont>),
    ]),
    getItem('商户管理', '/merchant', <IconFont type="icon-sh_icon_01" style={{ fontSize: 20 }}></IconFont>, [
        getItem('商户主页', '/merchant', <IconFont type="icon-yingyong" style={{ fontSize: 20 }}></IconFont>,),
        getItem('新增商户', '/merchant/add',<IconFont type="icon-xinzeng" style={{ fontSize: 20 }}></IconFont>),
    ]),
    getItem('活动管理', '/promote', <IconFont type="icon-huodong" style={{ fontSize: 20 }}></IconFont>, [
        getItem('活动主页', '/promote', <IconFont type="icon-yingyong" style={{ fontSize: 20 }}></IconFont>,),
    ]),
    getItem('管理员', '/admin', <IconFont type="icon-guanliyuan" style={{ fontSize: 20 }}></IconFont>, [
        getItem('主页', '/admin', <IconFont type="icon-yingyong" style={{ fontSize: 20 }}></IconFont>,),
        getItem('操作日志', '/admin/action',<IconFont type="icon-caozuorizhi" style={{ fontSize: 20 }}></IconFont>,),
        getItem('错误日志', '/admin/error',<IconFont type="icon-cuowurizhi" style={{ fontSize: 20 }}></IconFont>,),
    ]),
];

const MyMenu = () => {
    const { pathname } = useLocation();
    const navigate = useNavigate();
    const { Header, Content, Footer, Sider } = Layout;
    const [collapsed, setCollapsed] = useState(false);  //收缩左边菜单栏
    const [windowWidth, setWindowWidth] = useState(getWidth());   //实时获取页面宽度
    const {
      token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();



    //页面跳转
    const go = (e) => {
        navigate(e.key)
       
    }


    // 标记一下   card响应改变
    useEffect(() => {
        const widthSize = () => {
            setWindowWidth(getWidth());
        };
        window.addEventListener("resize", widthSize);
        if (windowWidth.width <= 1350) {
           setCollapsed(true)
        }

        if(windowWidth.width>1350){
            setCollapsed(false);
        }

        return () => {
            window.removeEventListener("resize", widthSize);
        };
    });

    return (
        
        <Sider  className='icontips' collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
       
        <Menu
            
            onClick={(e) => { go(e) }}
            className='mymenu'
            // theme="dark" 
            defaultSelectedKeys={[pathname]}
            defaultOpenKeys={[pathname]}
            mode="inline"
            items={items}
        />
         </Sider>

    )
}
export default MyMenu;